/*
 * @Author: wuhao930406 1148547900@qq.com
 * @Date: 2023-08-25 11:38:10
 * @LastEditors: wuhao930406 1148547900@qq.com
 * @LastEditTime: 2023-10-08 10:03:28
 * @FilePath: /legion-iot/src/pages/dashboard3d/components/VideoPlayer.js
 * @Description:
 *
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
 */
import React, { useEffect, useRef } from "react";
import videojs from "video.js";
import "video.js/dist/video-js.css";
import "videojs-contrib-hls";

const VideoPlayer = ({ source }) => {
  const videoRef = useRef(null);
  const playerRef = useRef(null);

  useEffect(() => {
    // 初始化Video.js播放器
    playerRef.current = videojs(videoRef.current, {
      sources: [
        {
          src: source,
          type: "application/x-mpegURL", // HLS格式
        },
      ],
    });
    playerRef.current.play()

    // 在组件卸载时销毁播放器
    return () => {
      if (playerRef.current) {
        playerRef.current.dispose();
      }
    };
  }, []);

  return (
    <div style={{ width: "100%", height: "100%" }}>
      <video
        ref={videoRef}
        autoPlay
        muted
        controls
        className="video-js vjs-default-skin"
        style={{ width: "100%", height: "100%" }}
      />
    </div>
  );
};

export default VideoPlayer;
